<template>
  <view class="container">
    <!-- 搜索框部分-->
    <view class="search">
      <view class="search_input">
        <image :src="$store.state.imgBaseUrl + '/icon/searchIcon.png'" mode=""></image>
        <input type="text" value="" placeholder="请输入关键字搜索" focus="true" v-model="ipt" placeholder-style='color:#BBBBBB' @confirm="searchNow($event)" />
      </view>
      <view @click="handleBackClick" class="text">
        取消
      </view>
    </view>
    <!-- 热门搜索部分-->
    <view class="hot_search">
      <view class="hot_list">
        <text>热门搜索</text>
        <view class="list_box">
          <view class="item" v-for="(item,index) in hotList" :key="index">
            <text @click="qusousuoed(item)">{{item}}</text>
          </view>
        </view>

      </view>
    </view>
    <!-- 热门搜索结束-->

    <!-- 最近搜索部分-->
    <view class="history_search">
      <view class="history_list">
        <view class="title">
          <view class="title-text">
            <text>最近搜索</text>
          </view>
          <image @tap="clearKey" class="title-image" :src="$store.state.imgBaseUrl + '/goodDetail/del.png'" mode=""></image>
        </view>
        <view class="list_box">
          <view class="item" v-for="(item,index) in searchKey" :key='index' @click="qusousuo(item.content)">
            <text>{{item.content}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { hotSearch,deleteSearch,getProductSearch } from '@/service/findShop/findShop.service.js'
export default {
  data() {
    return {
      searchKey: [],
      ipt: '',
      searchClose: true,
      jiaodian: true,
      hotList: [],
      categoryId:'',
      districtName:'',
      descs:'',
      keywords:'',
      size:10,
      current:1,
      // token: gettokenStore(),
    }
  },
  onLoad(option) {
    this.districtName = option.City;
    this.ipt = option.keywords;
    this.findProductSearch();
  },
  onShow() {
    this.getHotSearchList();
  },
  methods: {
    // removeGoodsNamKey(){
    //   uni.removeStorage({
    //     key:'GOODS_NAME',
    //     success:res=>{
    //       console.log(res)
    //     }
    //   })
    // },
  
    /* 点击清空最近搜索弹出框*/
    clearKey: function() {
      var that = this;
      uni.showModal({
        title: '提示',
        content: '点击确定将删除所有历史信息，确定删除吗？',
        success: function(res) {
          if (res.confirm) {
            that.deleteProductSearch();
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
          
        }
      });

    },
    /* 输入搜索*/
    searchNow(e) {
      // #ifdef H5
      document.activeElement.blur()
      // #endif
      // let params ={
      //   token:this.token,
      //   districtName:'',
      //   size:10,
      //   current:1,
      //   keyword:this.ipt,
      // }
      // uni.setStorageSync('keyword',this.ipt);
      // uni.setStorage({
      //   key: 'keyword',
      //   data:this.ipt,
      // });
      uni.navigateTo({
        url: '/pages/findShop/shopIndex?keyword=' + this.ipt + (this.districtName ? '&pre=chooseCity' : '')
      })
      // findListData(params).then(res => {
      //   const data = res.data;
      //   if (res.status === 0) {
      //     uni.switchTab({
      //       url: '/pages/findShop/shopIndex'
      //     })
      //   }
      // });
    },
    //获取历史搜索记录
    findProductSearch(){
      getProductSearch({},res => {
        const data = res.data;
        if (res.status === 0) {
          this.searchKey = data;
        }
      })
    },
    //删除历史
    deleteProductSearch(){
      deleteSearch({},res => {
        const data = res.data;
        if (res.status === 0) {
          this.findProductSearch();
        }
      })
    },
    /* 标签点击获取数据*/
    qusousuo(content) {
      // #ifdef H5
      document.activeElement.blur();
      // #endif
      // uni.setStorageSync('keyword',content);
      // setTimeout(function() {
        
      // }, 500);
      uni.navigateTo({
        url:'/pages/findShop/shopIndex?keyword=' + content + (this.districtName ? '&pre=chooseCity' : '')
      })
    },
    qusousuoed(content) {
      // #ifdef H5
      document.activeElement.blur()
      // #endif
      // uni.setStorageSync('keyword',content);
      // setTimeout(function() {
      //   uni.redirectTo({
      //     url: '/pages/findShop/shopIndex?keyword=' + content
      //   })
      // }, 500);
      uni.navigateTo({
        url: '/pages/findShop/shopIndex?keyword=' + content + (this.districtName ? '&pre=chooseCity' : '')
      })
    },
    /* 获取热门搜索数据*/
    getHotSearchList() {
      // let token = gettokenStore();
      hotSearch({},res => {
        if(res.status===0){
          let result = [];
          for (let i in res.data){
            result.push(res.data[i].value)
          }
          this.hotList=result;
        } 
      })
    },
    /* 点击取消跳转TabBar*/
    handleBackClick() {
      uni.navigateTo({
        url: '/pages/findShop/shopIndex'
      })
    }
  },
}
</script>
<style lang="scss">
  .search {
    width: 100%;
    display: flex;
    height: 108rpx;
    background: #FFFFFF;

    .search_input {
      width: 620rpx;
      height: 72rpx;
      display: flex;
      border-radius: 36rpx;
      background: #F5F5F5;
      margin: auto 0 auto 30rpx;
      // .close{
        
      // }
      image {
        width: 32rpx;
        height: 32rpx;
        margin: 20rpx 18rpx 20rpx 20rpx;
      }

      input {
        width: 100%;
        margin: 16rpx 0;
        line-height: 40rpx;
        font-size: 28rpx;
      }
    }

    .text {
      font-size: 28rpx;
      line-height: 108rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      margin-left: 10rpx;
    }
  }

  .hot_search {
    width: 100%;
    background: #FFFFFF;

    .hot_list {
      margin: 0 30rpx;

      text {
        line-height: 50px;
        font-size: 28rpx;
        font-weight: 400;
        color: #666666;
      }

      .list_box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .item {
          height: 60rpx;
          margin: 0rpx 16rpx 20rpx 0;
          border-radius: 15px;
          background: #F5F5F5;
          padding-left: 30rpx;
          padding-right: 30rpx;
          text {
            line-height: 60rpx;
            padding: 0 6rpx;
          }

        }
      }
    }
  }

  .history_search {
    width: 100%;
    background: #FFFFFF;
    margin-top: 20rpx;

    .history_list {
      margin: 0 30rpx;

      .title {
        .title-text {
          line-height: 50px;
          font-size: 28rpx;
          font-weight: 400;
          color: #666666;
          float: left;
        }

        .title-image {
          width: 36rpx;
          height: 36rpx;
          float: right;
          margin-top: 30rpx;
        }
      }


      .list_box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .item {
          height: 60rpx;
          margin: 0rpx 16rpx 20rpx 0;
          border-radius: 15px;
          background: #F5F5F5;
          padding-left: 30rpx;
          padding-right: 30rpx;
          font-size: 28rpx;
          color: #666666;
          text {
            line-height: 60rpx;
            padding: 0 6rpx;
          }

        }
      }
    }
  }
</style>
